<template>
	<view class="container">
		<view class="top-box" :style="'background-color:' + actcolor">
			<view class="postion-box">
				<!-- <uni-collapse :accordion="true">
					<uni-collapse-item title="记录类别(全部)" :animation="true" ref="guan">
						<view class="content" v-for="(item,index) in listdata">
							<view class="content-box" @tap="selectCate(item.cate_id,index)" :class="{'bgcolor':(num == index)}">{{item.cate_name}}</view>
						</view>
					</uni-collapse-item>
				</uni-collapse> -->
				<sl-filter :independence="true" :color="titleColor" :reflexTitle="true" :themeColor="themeColor"
				 :menuList.sync="menuList" @result="result"></sl-filter>
				<view @tap="selecttime">
					<uni-collapse :accordion="true">
						<uni-collapse-item title="时间(全部)" :animation="true">
							
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
			<!-- <view class="seach-box">
				<input type="text" class="btn" placeholder-class="plabtn" value="" placeholder="搜索"/>
			</view> -->
			<view class="seach-box">
				<view class="text-num" v-if="record_log_count">共{{record_log_count}}条</view>
				<view class="search" @tap="search_btn">
					<image src="../../../static/images/search1.png" mode="" class="search-img"></image>
				</view>
			</view>
		</view>
		<view class="big-box" v-if="no_data" v-for="(item,index) in numlist">
			<view class="card">
				<view class="left-card">
					<view class="text1">记录类别：{{item.cate_name}}</view>
					<view class="text1">项目名称：{{item.project_name}}</view>
					<view class="text1">记录时间：{{item.add_time}}</view>
					<view class="text1">记录人：{{item.worker_name}}</view>
				</view>
				<view class="right-card" @tap="onClick(index)">
					<image src="../../../static/images/xiangshang.png" mode="" :class="{'right-top-hide':isOpen[index]}" class="right-top"></image>
				</view>
			</view>
			<view class="card-child" v-if="isOpen[index]">
				<view class="text">业主姓名：{{item.user_name}}</view>
				<view class="text">业主联系方式：{{item.user_phone}}</view>
				<view class="text">业主房间：{{item.user_address}}</view>
				<view class="text">单价：{{item.unit_price}}</view>
				<view class="text">倍率：{{item.rate}}</view>
				<view class="text">公摊：{{item.pool}}</view>
				<view class="text">起度：{{item.start_num}}</view>
				<view class="text">止度：{{item.end_num}}</view>
			</view>
		</view>
		<view class="tip_box_no_data" v-if="!no_data">
			<image class="no_data_img" src="../../../static/images/no_data.png"></image>
			<view class='no_tip_content'>没搜到相关记录</view>
		</view>
		
		<view>
			<w-picker
				mode="date" 
				startYear="2017" 
				endYear="2099"
				:defaultVal="['2019','12','28']"
				:current="false" 
				@confirm="onConfirm"
				:disabledAfter="false"
				ref="date" 
				themeColor="#f00"
			></w-picker>
		</view>
	</view>
</template>

<script>
	import slFilter from '../../appoint/component/sl-filter/sl-filter.vue';
	import uniCollapse from '../component/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '../component/uni-collapse-item/uni-collapse-item.vue'
	import wPicker from "../component/w-picker/w-picker.vue";
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getcate = () => {
		common.post('HouseApi&a=meter_read_cate', {
			village_id: _this.village_id,
		}, data => {
			console.log('++++', data)
			_this.listdata = data.dataList;
			let menuList = [];
			let msg = {};
			msg['detailList'] = [];
			for (let i in _this.listdata) {
				if (_this.listdata[i]) {
					let arr = {};
					arr['title'] = _this.listdata[i].cate_name;
					arr['value'] = _this.listdata[i].cate_id;
					msg['detailList'].push(arr);
				}
			}
			msg['title'] = '记录类别';
			msg['detailTitle'] = '请选择类型';
			msg['isMutiple'] = false;
			msg['key'] = 'cate_id';
			msg['defaultSelectedIndex'] = 0;
			menuList.push(msg)
			_this.menuList = menuList;
			_this.$forceUpdate();
			console.log("hhhhhhhhhhhhhhhhhhhh", _this.menuList);
			
		});
	};
	//所有房间的数据
	const getrecords = () => {
		common.post('HouseApi&a=record_list', {
			village_id: _this.village_id,
			page: 1,
			cate_id: _this.cate_id,
			add_time: _this.time
		}, data => {
			console.log('++++', data)
			if(data.dataList.length > 0){
				_this.no_data = true
				_this.numlist = data.dataList;
				_this.record_log_count = data.record_list_count;
				
			}else{
				_this.no_data = false
			}
		});
	};
	//当前房间的数据
	const getrecordsInfo = () => {
		common.post('HouseApi&a=record_room_list', {
			village_id: _this.village_id,
			room_id: _this.room_id,
			page: 1,
			cate_id: _this.cate_id,
			add_time: _this.time
		}, data => {
			console.log('++++', data)
			if(data.dataList.length > 0){
				_this.no_data = true
				_this.numlist = data.dataList;
				_this.record_log_count = data.record_list_count;
			}else{
				_this.no_data = false
			}
		});
	};
	export default {
		components: {
			slFilter,
			uniCollapse,
			uniCollapseItem,
			wPicker
		},
		data() {
			return {
				listdata: {},
				numlist: [],
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				num: 0,
				time: '',
				cate_id: '',
				no_data: false,
				record_log_count: '',
				list: [{
						text: '正常'
					},
					{
						text: '异常'
					}
				],
				isOpen: [],
				room_id: '',
				themeColor: '#2681f3',
				titleColor: '#666666',
				menuList: [{
					'title': '记录类别',
					'detailTitle': '请选择职位类型（可多选）',
					'isMutiple': false,
					'key': 'cate_id',
					'defaultSelectedIndex': 0,
					'detailList': [{
							'title': '不限',
							'value': ''
						},
						{
							'title': 'uni-app',
							'value': 'uni-app'
						},
						{
							'title': 'java开发',
							'value': 'java'
						},
						{
							'title': 'web开发',
							'value': 'web'
						},
						{
							'title': 'Android开发',
							'value': 'Android'
						},
						{
							'title': 'iOS开发',
							'value': 'iOS'
						},
						{
							'title': '测试工程师',
							'value': '测试'
						},
						{
							'title': 'UI设计',
							'value': 'UI'
						},
						{
							'title': 'Ruby开发',
							'value': 'Ruby'
						},
						{
							'title': 'C#开发',
							'value': 'C#'
						},
						{
							'title': 'PHP开发',
							'value': 'php'
						},
						{
							'title': 'Python开发',
							'value': 'Python'
						}
					]
				}, ],
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.room_id = options.room_id;
			console.log("房间id",_this.room_id)
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				getcate();
				if(_this.room_id){
					//当前房间的数据
					getrecordsInfo();
				}else{
					getrecords();
				}
			});
		},
		methods: {
			result(val) {
				console.log('filter_result:' + JSON.stringify(val));
				_this.filterResult = val
				console.log("rrrrrrrrrrrrrr",val)
				_this.cate_id = _this.filterResult.cate_id;
				console.log(_this.cate_id)
			},
			onClick(index) {
				_this.isOpen[index] = !_this.isOpen[index];
				console.log("......",typeof(!_this.isOpen[index]))
				console.log(_this.isOpen);
				_this.$forceUpdate();
			},
			//选择类别
			selectCate(cate_id,index){
				_this.cate_id = cate_id;
				console.log("444444444",_this.cate_id)
				_this.num = index;
				_this.$refs['guan'].isOpen = false;
				
			},
			//选择时间
			selecttime(){
				_this.$refs.date.show()
			},
			//返回时间val
			onConfirm(val){
				_this.time = val.result
				console.log("kkkkkkkkkkkk",_this.time)
			},
			//搜索
			search_btn(){
				if(_this.room_id){
					//当前房间的数据
					getrecordsInfo();
				}else{
					getrecords();
				}
			},
		},

	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.top-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.postion-box {
		display: flex;
		flex-direction: row;
	}

	.seach-box {
		height: 48px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.text-num {
		height: 48px;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 48px;
		margin-right: 35rpx;
	}
	.search {
		width: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-left: 2rpx solid #F1F1F1;
	}
	
	.search-img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 5rpx;
	}
	.big-box {
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
		overflow: hidden;
		border-radius: 20rpx;
		margin: 30rpx 20rpx 0rpx 20rpx;
	}

	.card {
		padding: 30rpx;
		background-image: linear-gradient(90deg, #71acff 0%, #2d8aff 100%), linear-gradient(#6ca5ff, #6ca5ff);
		background-blend-mode: normal, normal;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text1 {
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 50rpx;
	}
	.text {
		font-size: 26rpx;
		color: #666666;
		line-height: 70rpx;
	}

	.right-card {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.right-top {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		display: block;
		transform: rotate(180deg);
	}

	.right-top-hide {
		width: 60rpx;
		height: 60rpx;
		display: block;
		transform: rotate(0deg);
	}

	.card-child {
		background: #FFFFFF;
		padding: 0rpx 20rpx 0rpx 20rpx;
	}
	.content {
		padding: 10rpx 5rpx;
	}
	.content-box {
		color: #FFFFFF;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		text-align: center;
		/* border: 2rpx solid #CCCCCC; */
	}
	.bgcolor {
		padding: 5rpx 10rpx;
		border: 0;
		text-align: center;
		background-image: linear-gradient(90deg, #71acff 0%, #2d8aff 100%), linear-gradient(#6ca5ff, #6ca5ff);
		background-blend-mode: normal, normal;
		
	}
	.card-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
	.tip_box_no_data {
		padding-top: calc((100vh - 80rpx - 288rpx - 21rpx)/2);
		font-size: 28rpx;
		text-align: center;
	}
	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}
	.no_data_img{
		width:374rpx;
		height:288rpx;
	}
	/deep/ .content{
		padding: 0px 30rpx;
	}
	
	/deep/ .select-tab {
		background-color: rgba(0, 0, 0, 0);
	}
	
	/deep/ .select-tab .select-tab-item uni-text {
		color: #FFFFFF !important;
	}
	
	/deep/ .uni-collapse {
		background-color: rgba(0, 0, 0, 0);
	}
	
	/deep/ .uni-collapse-cell--hover {
		background-color: rgba(0, 0, 0, 0);
	}
	
	/deep/ .uni-collapse-cell--open {
		background-color: rgba(0, 0, 0, 0);
	}
	
	/deep/ .uni-collapse-cell--disabled {
		background-color: rgba(0, 0, 0, 0);
	}
	
	/deep/ .uni-collapse-cell__title:active {
		background-color: rgba(0, 0, 0, 0);
	}
	
	/deep/ .uni-collapse-cell__title {
		color: #FFFFFF;
		font-size: 24rpx;
	}
	
	/deep/ .uni-collapse-cell {
		border: 0rpx;
	}
	
	/deep/ .uni-icon-arrowdown:before {
		color: #FFFFFF;
	}
</style>
